import Taro, {Component, Config} from '@tarojs/taro'
import {Image, View, Button} from '@tarojs/components'
import { SDBody } from 'sudao-ui'
import SDUtils from 'sudao-utils'

import './index.less'

import MoreIcon from '../../../images/ic_next.png'
import ServiceIcon from '../../../images/ic_service.png'
import {ORDER_DATA_KEY} from "../../../redux/constants";

import orderStatusMapper from '../orderStatus'

type PageState = {
  mainIsLoading: boolean,
  orderItem: any
}

export default class OrderDetailPage extends Component<{}, PageState> {

  config: Config = {
    navigationBarTitleText: '订单详情'
  }

  constructor () {
    super(...arguments)
    this.state = {
      mainIsLoading: true,
      orderItem: {}
    }
  }

  componentDidMount () {
    let orderId = (this.$router.params || {}).orderId || 15
    if (!orderId) {
      return
    }
    this.fetchData(orderId)
  }

  fetchData = async (orderId) => {
    let orderItem = {}

    try {
      let resp = await SDUtils.doGet(`/wxmini/order/${orderId}`)
      orderItem = resp
    } catch (e) {
      SDUtils.showMsg(e)
    } finally {
      this.setState({
        orderItem: orderItem,
        mainIsLoading: false
      })
    }
  }

  render () {
    const { statusBarHeight } = Taro.getSystemInfoSync()
    const bottomH = statusBarHeight == 44 ? 34 : 0
    const { mainIsLoading, orderItem } = this.state
    return (
      <SDBody sd-class='container' loading={mainIsLoading}>
        <View className="section-status border-bottom_1px">
          <View className="title">订单号：{orderItem.orderNo}</View>
          <View className="sub-title">{orderStatusMapper(orderItem.orderViewStatusEnums)}</View>
        </View>
        <View className="section-store">
          <View className="store-item">
            <View className="left">
              <View className="item">收</View>
              <View className="item">货</View>
              <View className="item">门</View>
              <View className="item">店：</View>
            </View>
            <View className="right right-dark">{orderItem.buyerName}</View>
          </View>
          <View className="store-item">
            <View className="left">
              <View className="item">地</View>
              <View className="item">址：</View>
            </View>
            <View className="right">{[orderItem.provinceName, orderItem.cityName, orderItem.countyName, orderItem.buyerArea].join(' ')}</View>
          </View>
          <View className="store-item">
            <View className="left">
              <View className="item">电</View>
              <View className="item">话：</View>
            </View>
            <View className="right">{orderItem.receiverPhone}</View>
          </View>
          <View className="store-item">
            <View className="left">
              <View className="item">联</View>
              <View className="item">系</View>
              <View className="item">人：</View>
            </View>
            <View className="right">{orderItem.receiverName}</View>
          </View>
        </View>
        <View className="section-goods">
          <View className="header">
            <View className="left">
              <View className="item">商品：{orderItem.productTotalQuantity}</View>
              <View className="item">规格：{orderItem.skuTotalQuantity}</View>
              <View className="item">总数: {orderItem.totalQuantity}</View>
            </View>
            <View className="right" onClick={this.gotoMenuDetailPage}>
              <View className="title">查看明细</View>
              <Image className="more-icon" src={MoreIcon}></Image>
            </View>
          </View>
          <View className="sku-list">
            {
              (((orderItem.itmes || {}).productViewVo || []).slice(0, 8)).map((item, index) => {
                return (
                  <View className="sku-item" key={index}>
                    <Image className="img" src={item.image}></Image>
                    <View className="tips-content">
                      <View className="title">{item.buyCount}个</View>
                    </View>
                  </View>
                )
              })
            }
          </View>
          <View className="sku-cell__list">
            <View className="sku-cell__item border-bottom_1px border-top_1px">
              <View className="title">商品总金额</View>
              <View className="sub-title">{SDUtils.formatPrice(orderItem.finalTotalAmount)}</View>
            </View>
            {/*<View className="sku-cell__item border-bottom_1px">*/}
              {/*<View className="title">首单立减</View>*/}
              {/*<View className="sub-title">- ¥20.00</View>*/}
            {/*</View>*/}
            <View className="sku-cell__item">
              <View className="title">应付款总金额</View>
              <View className="sub-title price">{SDUtils.formatPrice(orderItem.finalTotalAmount)}</View>
            </View>
          </View>
        </View>

        <View className="section-order_msg">
          <View className="header">
            <View className="title">订单信息</View>
          </View>
          {
            orderItem.orderViewStatusEnums == 'COMPLETE' ? (
              <View className="list">
                <View className="item">订单号：{orderItem.orderNo}</View>
                <View className="item">创建时间：{SDUtils.formatDate(orderItem.createTime)}</View>
                <View className="item">付款时间：2018-08-09 12:50</View>
                <View className="item">发货时间：2018-08-09 12:503</View>
                <View className="item">收货时间：2018-08-10 12:503</View>
              </View>
            ) : (
              <View className="list">
                <View className="item">订单号：{orderItem.orderNo}</View>
                <View className="item">创建时间：{SDUtils.formatDate(orderItem.createTime)}</View>
                <View className="item">付款时间：2018-08-09 12:50</View>
                <View className="item">发货时间：2018-08-09 12:503</View>
                <View className="item">收货时间：2018-08-10 12:503</View>
              </View>
            )
          }
        </View>

        <View className="section-tips">
          <View className="header">
            <View className="title">温馨提示</View>
          </View>
          <View className="list">
            <View className="item">
              <View className="left">客服电话：</View>
              <View className="right">021-1234567</View>
            </View>
            <View className="item">
              1.微信支付使用储蓄卡支付最大可支持单笔5万微信支付使用储蓄卡支付最大可支持单笔5万
            </View>
            <View className="item">
              2.可联系客服线下转账支付
            </View>
          </View>
        </View>

        <View style='height:136rpx;'></View>
        <View className="fixed-bottom border-top_1px">
          <View className="bottom-bar">
            <Button className="btn-clear left" openType='contact'>
              <Image className="icon" src={ServiceIcon}></Image>
              <View className="title">客服</View>
            </Button>
            {
              orderItem.orderViewStatusEnums == 'COMPLETE' ? (    // 已完成
                <View className="right">
                  <Button className="btn-clear btn-normal" onClick={this.gotoLogisticsPage}>查看物流</Button>
                  <Button className="btn-clear btn-normal" onClick={this.gotoReturnsFormPage}>申请售后</Button>
                </View>
              ) : (
                orderItem.orderViewStatusEnums == 'PRE_ACCEPT' ? (    // 待收货
                  <View className="right">
                    <Button className="btn-clear btn-normal" onClick={this.gotoLogisticsPage}>查看物流</Button>
                    <Button className="btn-clear btn-normal btn-warning" onClick={this.confirmReceive}>确认收货</Button>
                  </View>
                ) : (
                  orderItem.orderViewStatusEnums == 'PRE_DELIVER' ? ( // 待发货
                    <View className="right">
                      <Button className="btn-clear btn-normal" onClick={this.cancelOrder}>取消订单</Button>
                    </View>
                  ) : (
                    orderItem.orderViewStatusEnums == 'CANCEL' ? (
                      <View className="right">
                        <Button className="btn-clear btn-normal" onClick={this.deleteOrder}>删除订单</Button>
                      </View>
                    ) : (
                      orderItem.orderViewStatusEnums == 'PRE_PAY' ? (
                        <View className="right">
                          <Button className="btn-clear btn-normal" onClick={this.cancelOrder}>取消订单</Button>
                          <Button className="btn-clear btn-normal" onClick={this.comeSooning}>他人代付</Button>
                          <Button className="btn-clear btn-normal btn-warning" onClick={this.doPayment}>立即支付</Button>
                        </View>
                      ) : (null)
                    )
                  )
                )
              )
            }
          </View>
          <View style={`height: ${bottomH}px;`}></View>
        </View>
      </SDBody>
    )
  }

  gotoMenuDetailPage = () => {
    const { orderItem } = this.state
    Taro.setStorageSync(ORDER_DATA_KEY, orderItem)
    SDUtils.jumpTo('/pages/order/menu/index')
  }

  gotoLogisticsPage = () => {
    SDUtils.jumpTo('/pages/other/logistics/index')
  }

  gotoReturnsFormPage = () => {
    SDUtils.jumpTo('/pages/order/returns/form/index')
  }

  confirmReceive = () => {
    console.log('确认收货')
  }

  cancelOrder = () => {
    console.log('取消订单')
  }

  deleteOrder = () => {
    console.log('删除订单')
  }

  doPayment = () => {
    console.log('立即支付')
  }

  comeSooning = () => {
    SDUtils.showMsg('即将开放')
  }
}
